<template>
  <a-spin :spinning="loading">
    <a-card size="small" title="育人与服务">
      <div slot="extra">总分: {{totalScore}}</div>
      <a-row type="flex" style="margin-bottom:10px" :gutter="16" >
        <a-col class="itemTitle" style="text-align: center" :span="4">考核项</a-col>
        <a-col class="itemTitle" style="text-align: center" :span="15">考核内容</a-col>
        <a-col class="itemTitle" style="text-align: center" :span="2">积分</a-col>
        <a-col :span="2">删除</a-col>
      </a-row>

      <a-row type="flex" v-for="(item, index) in itemList" :key="index" :gutter="16">
        <a-form-model :ref="getRef(index)" style="width: 100%" :model="itemList[index]" :rules="rules">
          <a-form-model-item style="display: none">
            <a-input placeholder="id" v-model="item.id" />
          </a-form-model-item>
          <a-col :span="4">
            <a-form-model-item class="gfxy-item" prop="item">
              <j-dict-select-tag type="list" v-model="item.item" dictCode="JXMS_CLASSESS" placeholder="请选择考核项" :disabled="disabled"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="15">
            <a-form-model-item class="gfxy-item" prop="content">
              <a-input placeholder="考核内容" v-model="item.content" :disabled="disabled"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="2">
            <a-form-model-item class="gfxy-item" prop="score">
              <a-input-number placeholder="积分" style="width: 100%" v-model="item.score" :disabled="disabled"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="2">
            <a-form-model-item class="gfxy-item">
              <a-popconfirm title="确定删除？" @confirm="delRow(index)" okText="确定" cancelText="取消" :disabled="disabled">
                <a-icon type="minus-circle" style="fontSize :20px;color: #faad14"/>
              </a-popconfirm>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>

      <a-button type="dashed" style="width: 100%;margin-top: 10px;margin-bottom: 10px" @click="addItem" :disabled="disabled">
        <a-icon type="plus" /> 添加
      </a-button>
    </a-card>
  </a-spin>
</template>

<script>
export default {
  name: "serviceList",
  computed:{
    totalScore(){
      let result = 0;
      this.itemList.forEach(item => {
        result = result + item.score;
      })
      return result;
    },
  },
  data(){
    return {
      loading: false,
      disabled: false,
      itemList: [{item:1, content:'aaaaaa', score: 5}],

    }
  },
  methods: {
    getRef(index){
      return 'formref_' + index
    },
    addItem(){
      this.itemList.push({score:0})
    },

    delRow(index){
      console.log(index);
      this.itemList.splice(index,1);
    },
  }
}
</script>

<style scoped>

</style>